import { useState, useEffect } from "react";
import styles from "./styles.module.less";
import useDateDisplay from "@/hooks/useDateDisplay";
import { aiChat } from "@/utils/front/index";
import ThemeSwitch from "@/components/other/ThemeSwitch";
import { SyncOutlined } from "@ant-design/icons";

const Weather = () => {
  /*
    天气
    */
  const weatherArea = () => {
    return (
      <>
        <div className={styles.top}>
          <ThemeSwitch></ThemeSwitch>
        </div>
        <div className={styles.bottom}>
          <div style={{ gridRow: "1/span 2", fontSize: "50px" }}>31°</div>
          <div>晴</div>
          <div>西南风3级</div>
          <div>28~36℃</div>
          <div>优</div>
        </div>
      </>
    );
  };
  /*
  时钟
   */
  const [time, setTime] = useState(new Date());
  const { formattedDate, formattedTime, formattedDayOfWeek } = useDateDisplay();

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const deg = 6;
  const hrStyle = {
    transform: `rotateZ(${time.getHours() * 30 + time.getMinutes() / 2}deg)`,
  };
  const mnStyle = {
    transform: `rotateZ(${time.getMinutes() * deg}deg)`,
  };
  const scStyle = {
    transform: `rotateZ(${time.getSeconds() * deg}deg)`,
  };

  const clockArea = () => {
    return (
      <>
        <div className={styles.container}>
          <div className={styles.box}>
            <div className={styles.clock}>
              <div className={styles.hour}>
                <div className={styles.hr} style={hrStyle}></div>
              </div>
              <div className={styles.min}>
                <div className={styles.mn} style={mnStyle}></div>
              </div>
              <div className={styles.sec}>
                <div className={styles.sc} style={scStyle}></div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.time}>
          <p style={{ fontSize: "40px" }}>{formattedTime}</p>
          <p> {formattedDate}</p>
          <p>{formattedDayOfWeek}</p>
        </div>
      </>
    );
  };
  /*
  每日一句
  */
  const [quote, setQuote] = useState<string>("");
  const changeQuote = () => {
    console.log("再来一句");

    try {
      aiChat({
        data: "你是一个专业的励志文案创作者、专业的哲学大师。直接输出'每日一句'，要蕴含大道理，带有真实情感，能触动人心，让人亢奋。除此之外不要有其他内容,30-50个字，随机性大一点，自由发挥。",
      }).then((res: any) => {
        console.log(res);
        let index = -1;
        const timer = setInterval(() => {
          if (index < res.data.length - 1) {
            setQuote((prev) => prev + res.data[index]);
            index++;
          } else {
            clearInterval(timer);
          }
        }, 50);
      });
    } catch (error) {
      console.error("Error fetching quote:", error);
    }
  };
  // useEffect(() => {
  //   const fetchQuote = async () => {
  //     try {
  //       aiChat({
  //         data: "你是一个专业的励志文案创作者、专业的哲学大师。直接输出'每日一句'，要蕴含大道理，带有真实情感，能触动人心，让人亢奋。除此之外不要有其他内容,30-50个字，随机性大一点，自由发挥。",
  //       }).then((res: any) => {
  //         console.log(res);
  //         let index = -1;
  //         const timer = setInterval(() => {
  //           if (index < res.data.length - 1) {
  //             setQuote((prev) => prev + res.data[index]);
  //             index++;
  //           } else {
  //             clearInterval(timer);
  //           }
  //         }, 50);
  //       });
  //     } catch (error) {
  //       console.error("Error fetching quote:", error);
  //     }
  //   };

  //   fetchQuote();
  // }, [changed]);

  const quoteArea = () => {
    return (
      <>
        <div className={styles.title}>每日一句</div>
        <div className={styles.content}>
          {quote || "生命不是要超越别人，而是要超越自己。"}
        </div>
        <div className={styles.change} onClick={changeQuote}>
          <SyncOutlined style={{ color: "blue", marginLeft: "4px" }} />
          再来一句
        </div>
      </>
    );
  };

  return (
    <div className={styles.weather}>
      <div className={styles.top}>
        <div className={styles.left}>{weatherArea()}</div>
        <div className={styles.right}>{clockArea()}</div>
      </div>
      <div className={styles.bottom}>{quoteArea()}</div>
    </div>
  );
};

export default Weather;
